// 00取消订单
// 01等待发货
// 02等待支付
<template>
  <div>
    <van-sticky>
      <van-nav-bar title="我的订单" @click-left="$router.push('/')">
        <van-icon slot="left" name="wap-home-o" />
      </van-nav-bar>

      <!-- 标签页 -->

      <van-tabs v-model="active" @change="changeTab">
        <van-tab title="全部"></van-tab>
        <van-tab title="待支付"></van-tab>
        <van-tab title="待发货"></van-tab>
        <van-tab title="已取消"></van-tab>
      </van-tabs>
    </van-sticky>

    <!-- <List :list="showList">
      <Item slot="item" />
    </List> -->
    <!-- 商品列表 -->
    <div class="list">
      <div class="item bg-fff" v-for="item in showList" :key="item.orderId">
        <!-- 一个商品展示 -->
        <div v-if="item.carts.length === 1" class="flex item-single">
          <div>
            <img class="img" :src="item.carts[0].imgUrl" alt="" />
          </div>
          <div class="fdc jc-sb fg1">
            <p class="f14">{{ item.carts[0].masterName }}</p>
            <p class="flex aic jc-sb">
              <span class="f16 w700"
                >￥{{ (item.carts[0].price / 100).toFixed(2) }}</span
              >
              <span class="f12 f999">x{{ item.carts[0].buyNum }}</span>
            </p>
          </div>
        </div>
        <!-- 多商品图片展示 -->
        <div v-else class="flex aic jc-sb goodsLine">
          <div class="flex over">
            <img
              v-for="image in item.carts"
              :key="image.productId"
              class="img"
              :src="image.imgUrl"
              alt=""
            />
          </div>
          <i class="icon iconfont icon-jiantou"></i>
        </div>
        <!-- 共几件商品，付多少钱 -->
        <div class="tar f14">
          <span>共{{ item.carts.length }}件商品</span>
          <span>&nbsp;</span>
          <span>实付</span
          ><span class="base">￥{{ (item.allFee / 100).toFixed(2) }}</span>
        </div>
        <!-- 订单状态和购买按钮 -->
        <div class="flex jc-sb order-status aic">
          <span class="f16 f999" v-if="item.orderStatus != '02'"
            >订单状态:{{ orderStatus(item.orderStatus) }}</span
          >
          <span v-else class="f16 f999"
            >剩余支付时间：<RestTime :time="restTime(item.createTime)"
          /></span>
          <button @click="toPay(item)" class="order-btn">
            {{ btnText(item.orderStatus) }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "@/request/index";
// import List from "./orderListComponents/list.vue";
// import Item from "./orderListComponents/item.vue";
import RestTime from "@/components/RestTimr.vue";

export default {
  data() {
    return {
      // 全部订单列表
      list: [],
      // 取消订单列表
      listCel: [],
      // 已支付列表
      listPay: [],
      // 等待支付列表
      listWait: [],
      // 标签默认选中
      active: 0,
      //显示的列表
      showList: [],
    };
  },

  created() {
    this.getList();
  },
  components: {
    // List,
    // Item,
    RestTime,
  },
  methods: {
    changeTab(title) {
      console.log(title);
      switch (title) {
        case 0:
          this.showList = this.list;
          break;
        case 1:
          this.showList = this.listWait;
          break;
        case 2:
          this.showList = this.listPay;
          break;
        case 3:
          this.showList = this.listCel;
          break;
      }
    },
    getList() {
      get("/order/all")
        .then((res) => {
          console.log("我的订单", res);
          this.list = res.list;
          this.listCel = res.list.filter((item) => {
            return item.orderStatus == "00";
          });
          this.listPay = res.list.filter((item) => {
            return item.orderStatus == "01";
          });
          this.listWait = res.list.filter((item) => {
            return item.orderStatus == "02";
          });
          // 默认全部
          this.showList = this.list;
        })
        .catch((err) => console.log("获取我的订单失败", err));
    },

    orderStatus(status) {
      let res = "";
      if (status === "00") {
        res = "已取消";
      } else if (status === "01") {
        res = "待发货";
      } else {
        res = "待支付";
      }
      return res;
    },
    btnText(status) {
      let res = "";
      if (status === "00") {
        res = "重新购买";
      } else if (status === "01") {
        res = "再次购买";
      } else {
        res = "去支付";
      }
      return res;
    },
    // 获取支付订单
    async getPay(orderId) {
      let obj = null;
      obj = await get("/order/detail", { orderId });
      // .then((res) => {
      //   console.log("获取支付订单", res);
      //   obj = res.result;
      // })
      // .catch((err) => console.log("获取支付失败", err));
      return obj;
    },
    async toPay(item) {
      let path = "";
      let obj = {};
      // console.log(item.orderStatus);
      // return 0;
      switch (item.orderStatus) {
        case "02":
          path = "/order/pay";
          // alert("还没完成");
          await this.getPay(item.orderId).then((res) => {
            let orderObj = res.result;
            let result = {
              allFee: orderObj.allFee,
              company: "GGbong有限公司",
              createTime: orderObj.createTime,
              orderId: orderObj.orderId,
              qrcode: orderObj.qrcode,
            };

            console.log(11111, res);
            obj = {
              radio: 1,
              result,
            };
            obj = JSON.stringify(obj);
          });
          // 跳转
          this.$router.push({
            path,
            // query: obj,
            query: {
              orderObj: obj,
            },
          });
          break;
        case "01":
        case "00":
          path = "/order/preOrder";
          obj = { preOrderId: item.preOrderId };

          this.$router.push({
            path,
            // query: obj,
            query: {
              obj,
            },
          });
          break;
        default:
          console.log("跳转错误");
      }
      // return 0;
    },
    restTime(time) {
      let times = 15 * 60 * 1000 - (Date.now() - time);
      console.log("时间", times);
      if (times <= 0) {
        this.$router.push("/order/orderList");
      }
      return times;
    },
  },
};
</script>

<style lang="less" scoped>
@import "./orderList.less";
.van-icon-wap-home-o:before {
  color: #000;
  font-size: 20px;
}
</style>